<template>
  <el-select v-model="icon" filterable placeholder="请选择" style="width: 100%;" @change="handleChange">
    <div v-if="icon != ''" slot="prefix">
      <svg-icon :icon-class="icon" />
    </div>
    <el-option
      v-for="item in svgIcons"
      :key="item"
      :label="item"
      :value="item"
    >
      <span style="float: left;"><svg-icon :icon-class="item" style=" font-size: 24px;" /></span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item }}</span>
    </el-option>
  </el-select>
</template>

<script>
import svgIcons from './svg-icons'
export default {
  name: 'IconSelect',
  model: {
    prop: 'icon',
    event: 'updateModel'
  },
  props: {
    icon: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      svgIcons
    }
  },
  methods: {
    handleChange(val) {
      // 将选中的图标传递给父组件。参数1：自定义接收名称； 参数2：要传递的数据
      this.$emit('updateModel', val)
    }
  }
}
</script>

<style scoped>

</style>
